<template>
    <div class="my-chart" :class="className" style="min-height:400px; min-width: 100%"></div>
</template>

<script>
    // import highcharts from 'highcharts'
    // import gridLightTheme from '@/static/js/theme/chart/grid-light'
    // highcharts.theme = gridLightTheme
   // highcharts.setOptions(highcharts.theme)

    export default {
        name: "Chart",
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            type: {
                type: String,
                default: 'areaspline'
            },
            title: {
                type: String,
                default: ''
            },
            subtitle: {
                type: String,
                default: ''
            },
            ytitle: {
                type: String,
                default: ''
            },
            allowDecimals: {
                type: Boolean,
                default: false
            },
            categories: {
                type: Array,
                default: null
            },
            pointFormat: {
                type: String,
                default: ''
            },
            y: {
                type: Array,
                default: () => []
            },
            x: {
                type: Array,
                default: () => []
            }
        },
        mounted() {
            this.renderChart()
        },
        watch: {
            y() {
                this.renderChart()
            }
        },
        methods: {
            renderChart() {
                let that = this
                $('.' + that.className).highcharts({
                    credits: {
                        enabled: false
                    },
                    chart: {
                        type: that.type,
                    },
                    title: {
                        text: that.title
                    },
                    subtitle: {
                        text: that.subtitle
                    },
                    xAxis: {
                        categories: that.categories,
                        allowDecimals: that.allowDecimals,
                        labels: {
                            formatter: function () {
                                return that.x[this.value] // clean, unformatted number for year
                            }
                        }
                    },
                    yAxis:[
                        {
                            title: {
                                text: that.ytitle
                            },
                            labels: {
                                formatter: function () {
                                    return this.value;
                                }
                            }
                        },
                        {
                            title: {
                                text: that.ytitle
                            },
                            labels: {
                                formatter: function () {
                                    return this.value;
                                }
                            },
                            opposite: true
                        },
                    ],
                    tooltip: {
                        pointFormat: '{series.name} <b>{point.y:,.0f}</b>',
                        split: that.y[0] && that.y[0].type == 'pie' ? false : true,
                    },
                    plotOptions: {
                        area: {
                            marker: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 2,
                                states: {
                                    hover: {
                                        enabled: true
                                    }
                                }
                            },
                        },
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: 'sliver'
                                }
                            },
                            showInLegend: true
                        },
                        bar: {
                            enabled: true,
                            allowOverlap: true // 允许数据标签重叠
                        }
                    },
                    series: that.y
                });
            }
        }
    }
</script>

<style scoped>

</style>